<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tab选项卡</title>
		    <style>
		        /* 基础样式 */
		        .tab-container {
		            width: 600px;
		            margin: 20px auto;
		        }
		        
		        /* 标签导航样式 */
		        .tab-nav {
		            list-style: none;
		            padding: 0;
		            margin: 0;
		        }
		        .tab-nav li {
		            display: inline-block;
		            padding: 10px 20px;
		            cursor: pointer;
		            background: #f5f5f5;
		            margin-right: 5px;
		            border-radius: 3px 3px 0 0;
		        }
		        .tab-nav li.active {
		            background: #ffff00;
		            color: white;
		        }
		
		        /* 内容区域样式 */
		        .tab-content {
					height: 500px;
					width: 500px;
					background: #ffff00;
		            padding: 20px;
		            border: 1px solid #ddd;
		            border-top: none;
		        }
		        .tab-pane {
		            display: none;
		        }
		        .tab-pane.active {
		            display: block;
		        }
		    </style>
		</head>
		<body>
		    <div class="tab-container">
		        <!-- 导航标签 -->
		        <ul class="tab-nav">
		            <li class="active">Tab01</li>
		            <li>Tab02</li>
		            <li>Tab03</li>
		        </ul>
		
		        <!-- 内容区域 -->
		        <div class="tab-content">
		            <div class="tab-pane active">Tab文字内容1</div>
		            <div class="tab-pane">Tab文字内容2</div>
		            <div class="tab-pane">Tab文字内容3</div>
		        </div>
		    </div>
		
		    <!-- 引入jQuery -->
		    <script src="js/jquery-1.11.1.js"></script>
		    <script>
		    $(document).ready(function() {
		        // 点击标签事件
		        $('.tab-nav li').click(function() {
		            // 移除所有标签激活状态
		            $('.tab-nav li').removeClass('active');
		            
		            // 给当前点击标签添加激活状态
		            $(this).addClass('active');
		            
		            // 获取点击标签的索引
		            const index = $(this).index();
		            
		            // 隐藏所有内容区域
		            $('.tab-pane').removeClass('active');
		            
		            // 显示对应内容区域（带淡入效果）
		            $('.tab-pane').eq(index).addClass('active');
		        });
		    });
		    </script>
	</head>
	<body>
	</body>
</html>